
import { Button, Select } from 'antd';
import { useState } from 'react'
import { useMount, useReactive } from 'ahooks';

import { MultiRow } from '@grapecity/wijmo.react.grid.multirow';
import { FlexGridFilter } from '@grapecity/wijmo.grid.filter';

import { MultiRowConfig } from '../Data'
const SelectOptions = [
    { value: 'Compact', label: '契约', text: '此视图每条记录使用两行。布局分为三组：订单、客户和发货人' },
    { value: 'Detailed', label: '详情', text: '此视图每条记录使用三行。布局分为三组：订单、客户和发货人' },
    { value: 'Traditional', label: '基础', text: '传统的网格视图，每条记录一行。用户必须水平滚动才能查看整个记录。' },
]
const WijmoN01 = () => {

    const InitData = useReactive({
        init: null,
        status: false
    })


    const [Data, setData] = useState()
    const [Active, setActive] = useState('Compact')
    const [TableType, setTableType] = useState({})
    const onSelectType = (e) => { setActive(e) }

    useMount(() => {
        const { TableType, data } = MultiRowConfig(50)
        console.log('复合组件配置', TableType)
        console.log('复合组件数据', data)
        setTableType(TableType)
        setData(data)
    })

    const init = (init) => {
        InitData.init = init
        new FlexGridFilter(init)
    }

    const onFreezing = () => {
        const init = InitData.init
        const state = InitData.status
        init.frozenColumns = state ? 0 : 2
        init.frozenRows = state ? 0 : 2
        InitData.status = !state
    }


    return (
        <div className="Page">
            <div className="Label">
                <label htmlFor=""> 表格模式 </label>
                <Select options={SelectOptions} defaultValue={Active} onChange={onSelectType} />
            </div>
            <div className='center'>{SelectOptions.find(v => v.value === Active).text}</div>
            <MultiRow
                className="multirow-css"
                itemsSource={Data}
                layoutDefinition={TableType[Active]}
                initialized={init}
            />

            <Button onClick={onFreezing}>{InitData.status ? '冻结' : '解除'} </Button>
        </div>
    );
};

export default WijmoN01